<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 圆角带刻度仪表图样式1
 * @LastEditTime: 2021-11-04 13:44:00
 * @FilePath: \tianjushi-kanban\src\components\charts\Line.vue
-->
<template>
<div :style="[{ width: width, height: height,overflow:'hidden' }]">
  <div
    ref="echartref"
    :style="[{ width: width, height: height }, _resetChartStyle]"
  ></div>
</div>
</template>

<script>
import * as echarts from "echarts";

import { onMounted,toRefs, ref,reactive,watch,computed } from 'vue';
import { resetChartStyle, showLoading } from "@/core/tools/common";
export default {
  
  props: {
      title: {
      type: String,
      default: "100%",
    },
      width: {
      type: String,
      default: "100%",
    },
     height: {
      type: String,
      default: "100%",
    },
    total: {
      type: Number,
      default: 100,
    },
    value: {
      type: Number,
      default: 50,
    },
    color: {
      type: Array,
      default: ["#43B7FF","#009DFF"],
    },
  },
  setup: function (props, context) {
     
    /*监听props*/
    watch(props, (newProps, oldProps) => {
        f_echartInit(state.chartInit)
    }); 
 
    let state = reactive({ 
      echartref: ref(),
      chartInit:""
    }) 

    const _resetChartStyle = computed({
      get() {
        return resetChartStyle()
      } 
    }) 

    const f_echartInit = (chartdom) =>{ 
     
      // 指定图表的配置项和数据
        
      /* ------------------begin------------------ */
      let option = {
          xAxis: {
                  type: 'category',
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                 },
          yAxis: {
                   type: 'value'
                 },
          series: [
                  {
                     data: [20, 230, 224, 218, 135, 147, 260],
                     type: 'line'
                  }
                  ]
      };

      chartdom.setOption(option);
      chartdom.hideLoading(); 
    }
    //挂载
    onMounted(()=>{ 
      state.chartInit = echarts.init(state.echartref); 
      state.chartInit.showLoading(showLoading());
      f_echartInit(state.chartInit)
    }) 
    return {
      ...toRefs(state), 
      _resetChartStyle
    };  

  }, 
 
};
</script>

<style>
</style>